<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>审批申请管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
       
        </el-col>
        <el-col :span="4">
        
        </el-col>
        <el-col :span="13">
          <!-- <el-button>查询</el-button> -->
        </el-col>
      </el-row>
      <el-table :data="tableData.slice((pagenum - 1) * pagesize, pagenum * pagesize)"
        style="width: 100%; margin-top: 20px;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" class="demo-table-expand" label-width="100px">
              <el-form-item label="标题">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="申请人">
                <span>{{ props.row.applyPerson }}</span>
              </el-form-item>
              <el-form-item label="申请时间">
                <span>{{ props.row.applyTime }}</span>
              </el-form-item>
              <el-form-item label="申请内容" style="word-wrap: break-word; width: 70%;">
                <span>{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item label="审批人">
                <span>{{ props.row.approvalPerson }}</span>
              </el-form-item>
              <el-form-item label="审批时间">
                <span>{{ props.row.approvalTime }}</span>
              </el-form-item>
              <el-form-item label="审批备注" style="word-wrap: break-word; width: 70%;">
                <span>{{ props.row.remarks }}</span>
              </el-form-item>
              <el-form-item label="离校时间">
                <span>{{ props.row.leaveTime }}</span>
              </el-form-item>
              <el-form-item label="回校时间">
                <span>{{ props.row.backTime }}</span>
              </el-form-item>
              <el-form-item label="审核状态">
                <template slot-scope="scope">
                  <div v-if="props.row.status == '已保存'">
                    <el-tag type="warning">已保存</el-tag>
                  </div>
                  <div v-if="props.row.status == '审核中'">
                    <el-tag>审核中</el-tag>
                  </div>
                  <div v-if="props.row.status == '审核通过'">
                    <el-tag type="success">审核通过</el-tag>
                  </div>
                  <div v-if="props.row.status == '审核驳回'">
                    <el-tag type="danger">审核驳回</el-tag>
                  </div>
                </template>
              </el-form-item>
              <el-form-item style="text-align: right">
                <div style="margin-right: -110%;">
                  <el-button @click="infoUpdate(props.row)">审 批</el-button>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title">
        </el-table-column>
        <el-table-column label="申请人" prop="applyPerson">
        </el-table-column>
        <el-table-column label="申请内容" prop="content">
        </el-table-column>
        <el-table-column label="审核状态" prop="status">
          <template slot-scope="scope">
            <div v-if="scope.row.status == '已保存'">
              <el-tag type="warning">已保存</el-tag>
            </div>
            <div v-if="scope.row.status == '审核中'">
              <el-tag>审核中</el-tag>
            </div>
            <div v-if="scope.row.status == '审核通过'">
              <el-tag type="success">审核通过</el-tag>
            </div>
            <div v-if="scope.row.status == '审核驳回'">
              <el-tag type="danger">审核驳回</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog v-model="dataSon" title="审 批" :visible.sync="dialogFormVisible" style="text-align: center">
        <el-descriptions title="审批信息">
          <el-descriptions-item label="申请人">{{dataSon.applyPerson }}</el-descriptions-item>
          <el-descriptions-item label="申请内容">{{ dataSon.content }}</el-descriptions-item>
          <el-descriptions-item label="离校时间">{{ dataSon.leaveTime }}</el-descriptions-item>
          <el-descriptions-item label="返校时间"> {{ dataSon.backTime }} </el-descriptions-item>
        </el-descriptions>
        <div style="text-align: left; ">
          <span>备 注:</span>
          <el-input type="textarea" :row="4" v-model="dataSon.remarks"
            style="width: 80%; margin-left: 1%;"></el-input>
        </div>
        <div>
          <template>
            <el-table :data="dataSon.annex" style="width: 100%" max-height="250">
              <el-table-column fixed prop="fileName" label="文件名" width="150">
              </el-table-column>
              <el-table-column prop="fileLocation" label="文件位置" width="120">
              </el-table-column>
              <el-table-column prop="fileType" label="文件类型" width="120">
              </el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" width="120">
              </el-table-column>
              <el-table-column prop="uploadPerson" label="上传人" width="300">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="viewRow(scope.row)" type="text" size="small">
                    预览
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="danger" @click="disagree()">不同意</el-button>
          <el-button type="success" @click="agree()">同 意</el-button>
        </div>
      </el-dialog>


      <div class="demo-image__preview">
        <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="urlList"
          style="z-index:9999" />
      </div>
      
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="margin-top: 10px; text-align: center">
      </el-pagination>
    </el-card>
  </div>
</template>
 
  
<script>
import {
  GetApplicationInfoListAPI,
  AddApplicationInfoAPI,
  RemoveApplicationInfoAPI,
  UpdateApplicationInfoAPI
} from '@/components/utils/api/application_api.js'
import { GetBinDingAPI } from '@/components/utils/api/sysfile_api.js'

export default {
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
      dataSon: {},
      dialogFormVisible: false,
      middleList: [],
      total: 0,
      pagesize: 10,
      currentApprovalPersonId: '',
      pagenum: 1,
      tableData: [{}],
      tableFileData: [],
      leaveVisible: false,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入申请人', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择教师', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择请假性质', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      imgViewerVisible: false,
      urlList: []
    };
  },
  methods: {

    infoUpdate(info){
      console.log("file: ApplicationManage.vue:208  info", info)
      this.dataSon = JSON.parse(JSON.stringify(info))
      this.dialogFormVisible = true
    },

    //  关闭预览图片
    closeImgViewer() {
      this.imgViewerVisible = false;
      this.urlList = []
    },

    // 预览文件图片
    viewRow(info) {
      console.log(info)
      GetBinDingAPI(info.id).then(res => {
        this.urlList.push(res.data.data)
        this.imgViewerVisible = true
      })
    },


    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.pagesize = newSize
    },

    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.pagenum = newPage
    },

    // 获取请假信息
    getApplication() {
      if (sessionStorage.getItem("role") != '管理员用户') {
        this.currentApprovalPersonId = sessionStorage.getItem("userId")
      }
      GetApplicationInfoListAPI({
        status: 2,
        approvalPersonId: this.currentApprovalPersonId
      }).then(res => {
        this.tableData = res.data.data
        this.total = this.tableData.length
        console.log(res)
      })
    },

    // 不同意
    disagree() {
      this.middleList = JSON.parse(JSON.stringify(this.dataSon))
      this.middleList.status = 10
      console.log("file: ApplicationManage.vue:258  middleList", this.middleList)
      this.middleList.remarks = this.dataSon.remarks
      UpdateApplicationInfoAPI(this.middleList).then(res => {
        if (res.data.code == 200) {
          this.$message.success("操作成功")
          this.dialogFormVisible = false
          this.getApplication()
        }
        else {
          this.$message.success("操作失败")
        }

      })
    },
    // 同意
    agree() {
      this.middleList = JSON.parse(JSON.stringify(this.dataSon))
      this.middleList.status = 5
      this.middleList.remarks = this.dataSon.remarks
      console.log("file: ApplicationManage.vue:190  middleList", this.middleList)
      UpdateApplicationInfoAPI(this.middleList).then(res => {
        if (res.data.code == 200) {
          this.$message.success("操作成功")
          this.dialogFormVisible = false
          this.getApplication()
        }
        else {
          this.$message.success("操作失败")
        }
      })
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 100) {
        return value.slice(0, 190) + '...'
      }
      return value
    }
  },
  created() {
    this.getApplication()
  }
}
</script>
  
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>